import { Button, Modal, Space } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import { clPointApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { optionsToMap } from '@/utils'

import CustomerLogList from './components/customerLogList'
import FeedbackList from './components/feedbackList'

export default defineComponent({
  name: 'CustomerInfo',
  setup() {
    const route = useRoute()
    const curOptionItem = ref({} as any)
    const showLogDlg = ref(false)
    const showFeedbackDlg = ref(false)
    const sourceOptions = [
      { label: '未知来源', value: 0 },
      { label: '扫描二维码', value: 1 },
      { label: '搜索手机号', value: 2 },
      { label: '名片分享', value: 3 },
      { label: '群聊', value: 4 },
      { label: '手机通讯录', value: 5 },
      { label: '微信联系人', value: 6 },
      { label: '来自微信的添加好友申请', value: 7 },
      { label: '安装第三方应用时自动添加的客服人员', value: 8 },
      { label: '搜索邮箱 ', value: 9 },
      { label: '内部成员共享 ', value: 201 },
      { label: '管理员/负责人分配 ', value: 202 }
    ]

    const yesNoOptions = [
      { label: '否', value: 0 },
      { label: '是', value: 1 }
    ]

    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '客户名称',
              field: 'customerName',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },

            {
              title: '手机号',
              field: 'phone',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '来源',
              field: 'addWay',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: sourceOptions
              }
            },
            {
              title: '是否还是企微客户',
              field: 'isWecomUser',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: yesNoOptions
              }
            },
            {
              title: '川流积分是否同步正常',
              field: 'isSyncSuccess',
              itemRender: {
                name: TABLE_ITEM_RENDER.ASelect,
                props: {
                  placeholder: '全部',
                  allowClear: true
                },
                options: yesNoOptions
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            title: '客户名称',
            field: 'customerName'
          },
          {
            title: '手机号',
            field: 'phone'
          },
          {
            title: '类型',
            field: 'accountTypeName'
          },
          {
            title: '川流积分',
            field: 'flowPoints',
            width: 80
          },
          {
            title: '添加方式(来源)',
            field: 'addWayName'
          },
          {
            title: '是否还是企微客户',
            field: 'isWecomUser',
            width: 150,
            formatter: ({ cellValue }) => {
              return optionsToMap(yesNoOptions)[cellValue]
            }
          },
          {
            title: '所在群',
            field: 'groupNameList',
            width: 300
          },
          {
            title: '川流积分是否同步正常',
            field: 'isSyncSuccess',
            formatter: ({ cellValue }) => {
              return optionsToMap(yesNoOptions)[cellValue]
            },
            width: 150
          },
          {
            title: '最后一次同步积分时间',
            field: 'lastSyncTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss'],
            width: 150
          },

          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            },
            width: 150
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await clPointApi.getCustomerList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                userId: route.query.userId,
                groupId: route.query.groupId,
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //日志
    function showlog(item) {
      curOptionItem.value = item
      showLogDlg.value = true
    }

    //意见反馈
    function showFeedback(item) {
      curOptionItem.value = item
      showFeedbackDlg.value = true
    }

    return {
      tableRef,
      tableConfig,
      showLogDlg,
      showFeedbackDlg,
      curOptionItem,
      showlog,
      showFeedback
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.showlog(row)}
                >
                  日志
                </Button>
                <Button
                  disabled={!row.memberId}
                  type="link"
                  size="small"
                  onClick={() => this.showFeedback(row)}
                >
                  意见反馈
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showLogDlg}
          title="操作日志"
          destroyOnClose
          width={600}
          footer={null}
        >
          <CustomerLogList
            userId={this.curOptionItem.userId}
            externalUserId={this.curOptionItem.externalUserId}
          />
        </Modal>
        <Modal
          v-model:visible={this.showFeedbackDlg}
          title="反馈记录"
          destroyOnClose
          width={900}
          footer={null}
        >
          <FeedbackList memberId={this.curOptionItem.memberId} />
        </Modal>
      </div>
    )
  }
})
